<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能办公系统</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" th:href="${pc} + '/static/css/index.css'" />



    <!-- 引入 Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <!-- 引入 ElementUI -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <!-- 引入 Moment.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <!-- 引入 Axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

</head>
<body>
    <div id="app">
        <el-container>
            <!-- 添加侧边栏 -->
            <el-aside :width="isCollapse ? '64px' : '200px'">
                <div class="logo" :class="{'logo-collapse': isCollapse}">
                    <i class="el-icon-eleme"></i>
                    <span style="padding-left: 6px;" v-show="!isCollapse">{{systemTitle}}</span>
                </div>
                <el-menu
                    background-color="transparent"
                    text-color="#fff"
                    active-text-color="#00ffff"
                    :default-active="activeMenu"
                    :default-openeds="[]"
                    class="el-menu-vertical"
                    :collapse="isCollapse"
                    :collapse-transition="false">
                    <el-menu-item index="1">
                        <i class="el-icon-s-home"></i>
                        <span slot="title">首页</span>
                    </el-menu-item>

                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-office-building"></i>
                            <span>小区管理</span>
                        </template>
                        <el-menu-item index="2-1">
                            <i class="el-icon-info"></i>
                            <span>小区信息</span>
                        </el-menu-item>
                        <el-menu-item index="2-2">
                            <i class="el-icon-school"></i>
                            <span>楼栋管理</span>
                        </el-menu-item>
                        <el-menu-item index="2-3">
                            <i class="el-icon-house"></i>
                            <span>单元管理</span>
                        </el-menu-item>
                    </el-submenu>

                    <el-submenu index="3">
                        <template slot="title">
                            <i class="el-icon-user"></i>
                            <span>住户管理</span>
                        </template>
                        <el-menu-item index="3-1">
                            <i class="el-icon-user-solid"></i>
                            <span>住户信息</span>
                        </el-menu-item>
                        <el-menu-item index="3-2">
                            <i class="el-icon-position"></i>
                            <span>访客管理</span>
                        </el-menu-item>
                        <el-menu-item index="3-3">
                            <i class="el-icon-truck"></i>
                            <span>车辆管理</span>
                        </el-menu-item>
                    </el-submenu>

                    <el-submenu index="4">
                        <template slot="title">
                            <i class="el-icon-s-cooperation"></i>
                            <span>物业管理</span>
                        </template>
                        <el-menu-item index="4-1">
                            <i class="el-icon-money"></i>
                            <span>物业费用</span>
                        </el-menu-item>
                        <el-menu-item index="4-2">
                            <i class="el-icon-s-order"></i>
                            <span>维修记录</span>
                        </el-menu-item>
                        <el-menu-item index="4-3">
                            <i class="el-icon-chat-line-round"></i>
                            <span>投诉建议</span>
                        </el-menu-item>
                    </el-submenu>

                    <el-submenu index="5">
                        <template slot="title">
                            <i class="el-icon-s-order"></i>
                            <span>报修管理</span>
                        </template>
                        <el-menu-item index="5-1">
                            <i class="el-icon-document"></i>
                            <span>报修工单</span>
                        </el-menu-item>
                        <el-menu-item index="5-2">
                            <i class="el-icon-time"></i>
                            <span>维修进度</span>
                        </el-menu-item>
                        <el-menu-item index="5-3">
                            <i class="el-icon-star-off"></i>
                            <span>满意度评价</span>
                        </el-menu-item>
                    </el-submenu>

                    <el-submenu index="6">
                        <template slot="title">
                            <i class="el-icon-s-marketing"></i>
                            <span>统计分析</span>
                        </template>
                        <el-menu-item index="6-1">
                            <i class="el-icon-s-data"></i>
                            <span>费用统计</span>
                        </el-menu-item>
                        <el-menu-item index="6-2">
                            <i class="el-icon-s-claim"></i>
                            <span>报修分析</span>
                        </el-menu-item>
                        <el-menu-item index="6-3">
                            <i class="el-icon-s-custom"></i>
                            <span>人员分布</span>
                        </el-menu-item>
                    </el-submenu>

                    <el-submenu index="7">
                        <template slot="title">
                            <i class="el-icon-setting"></i>
                            <span>系统设置</span>
                        </template>
                        <el-menu-item index="7-1">
                            <i class="el-icon-user-solid"></i>
                            <span>用户管理</span>
                        </el-menu-item>
                        <el-menu-item index="7-2">
                            <i class="el-icon-key"></i>
                            <span>角色权限</span>
                        </el-menu-item>
                        <el-menu-item index="7-3">
                            <i class="el-icon-s-tools"></i>
                            <span>系统参数</span>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>

            <el-container>
                <!-- 添加顶部导航 -->
                <el-header>
                    <div class="header-left">
                        <i class="el-icon-s-fold" @click="toggleCollapse"></i>
                    </div>
                    <div class="header-right">
                        <!-- 消息通知 -->
                        <div class="message-badge" @click="showMessages">
                            <el-badge :value="3" class="message-icon">
                                <i class="el-icon-bell"></i>
                            </el-badge>
                        </div>
                        <!-- 用户信息 -->
                        <div class="user-info">
                            <el-dropdown trigger="click">
                                <span class="user-dropdown">
                                    <i class="el-icon-user-solid"></i>
                                    superAdmin
                                    <i class="el-icon-caret-bottom"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>
                                        <i class="el-icon-s-custom"></i> 个人中心
                                    </el-dropdown-item>
                                    <el-dropdown-item>
                                        <i class="el-icon-setting"></i> 系统设置
                                    </el-dropdown-item>
                                    <el-dropdown-item divided>
                                        <i class="el-icon-switch-button"></i> 退出登录
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                    </div>
                </el-header>

                <!-- 主要内容区域 -->
                <el-main>
                    <div class="container">
                        
                        <!-- 数据卡片 -->
                        <div class="data-cards">
                            <div class="data-card">
                                <div class="card-info">
                                    <div class="card-value" style="color: #00ffff;">5541</div>
                                    <div class="card-label">小区数量</div>
                                </div>
                                <i class="el-icon-office-building card-icon"></i>
                            </div>
                            <div class="data-card">
                                <div class="card-info">
                                    <div class="card-value" style="color: #ffd700;">5541</div>
                                    <div class="card-label">小区总人数</div>
                                </div>
                                <i class="el-icon-user card-icon"></i>
                            </div>
                            <div class="data-card">
                                <div class="card-info">
                                    <div class="card-value" style="color: #ff6b6b;">5541</div>
                                    <div class="card-label">小区总楼栋数</div>
                                </div>
                                <i class="el-icon-house card-icon"></i>
                            </div>
                            <div class="data-card">
                                <div class="card-info">
                                    <div class="card-value" style="color: #00ffff;">5541</div>
                                    <div class="card-label">小区工作人数</div>
                                </div>
                                <i class="el-icon-s-custom card-icon"></i>
                            </div>
                        </div>

                        <!-- 添加图表和公告的行容器 -->
                        <div class="chart-notice-row">
                            <!-- 折线图模块 -->
                            <div class="chart-module">
                                <div class="module-header">
                                    <i class="el-icon-data-line"></i>
                                    <span>访问趋势</span>
                                    <el-select v-model="chartTimeRange" size="small" class="time-select">
                                        <el-option label="近7天" value="7"></el-option>
                                        <el-option label="近30天" value="30"></el-option>
                                        <el-option label="近90天" value="90"></el-option>
                                    </el-select>
                                </div>
                                <div class="chart-container">
                                    <div ref="visitChart" style="width: 100%; height: 300px;"></div>
                                </div>
                            </div>

                            <!-- 最新公告模块 -->
                            <div class="notice-module">
                                <div class="module-header">
                                    <i class="el-icon-bell"></i>
                                    <span>最新公告</span>
                                    <el-button type="text" class="more-btn">
                                        更多 <i class="el-icon-arrow-right"></i>
                                    </el-button>
                                </div>
                                <div class="notice-container">
                                    <div class="notice-timeline">
                                        <div v-for="(notice, index) in notices" :key="index" class="notice-item">
                                            <div class="timeline-dot"></div>
                                            <div class="timeline-line" v-if="index !== notices.length - 1"></div>
                                            <div class="notice-content">
                                                <div class="notice-header">
                                                    <el-tag :type="notice.type" size="small">{{ notice.tag }}</el-tag>
                                                    <span class="notice-time">{{ notice.time }}</span>
                                                </div>
                                                <span class="notice-title">{{ notice.title }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 添加三个图表的行容器 -->
                        <div class="charts-row">
                            <!-- 待办事项模块 -->
                            <div class="todo-module">
                                <div class="module-header">
                                    <i class="el-icon-s-claim"></i>
                                    <span>待办事项</span>
                                    <div class="header-right">
                                        <el-radio-group v-model="todoFilter" size="small">
                                            <el-radio-button label="all">全部</el-radio-button>
                                            <el-radio-button label="urgent">紧急</el-radio-button>
                                        </el-radio-group>
                                        <el-button type="text" class="more-btn">
                                            更多 <i class="el-icon-arrow-right"></i>
                                        </el-button>
                                    </div>
                                </div>
                                <div class="todo-container">
                                    <div v-for="(item, index) in todos" :key="index" class="todo-item">
                                        <div class="todo-left">
                                            <el-checkbox v-model="item.done" :disabled="item.type === 'danger'">
                                                <span :class="{'todo-done': item.done}">{{ item.title }}</span>
                                            </el-checkbox>
                                        </div>
                                        <div class="todo-content">
                                            <el-tag :type="item.type" size="small">{{ item.tag }}</el-tag>
                                        </div>
                                        <span class="todo-time">{{ item.time }}</span>
                                    </div>
                                    <div class="todo-footer">
                                        <span class="todo-stats">
                                            已完成 {{ completedTodos }}/{{ todos.length }}
                                        </span>
                                        <el-button type="text" size="small" @click="clearCompletedTodos">
                                            清除已完成
                                        </el-button>
                                    </div>
                                </div>
                            </div>

                            <!-- 饼图模块 -->
                            <div class="pie-module">
                                <div class="module-header">
                                    <i class="el-icon-pie-chart"></i>
                                    <span>房屋类型分布</span>
                                </div>
                                <div class="chart-container">
                                    <div ref="pieChart" style="width: 100%; height: 300px;"></div>
                                </div>
                            </div>

                            <!-- 柱状图模块 -->
                            <div class="bar-module">
                                <div class="module-header">
                                    <i class="el-icon-s-data"></i>
                                    <span>月度统计</span>
                                </div>
                                <div class="chart-container">
                                    <div ref="barChart" style="width: 100%; height: 300px;"></div>
                                </div>
                            </div>
                        </div>

                        <!-- 在三个图表行后添加表格模块 -->
                        <div class="table-module">
                            <div class="module-header">
                                <i class="el-icon-tickets"></i>
                                <span>小区列表</span>
                            </div>
                            <div class="table-container">
                                <el-table
                                    :data="tableData"
                                    style="width: 100%"
                                    :header-cell-style="{ background: 'rgba(4, 28, 75, 0.8)', color: '#fff' }"
                                    :cell-style="{ background: 'transparent', color: '#fff' }"
                                    border>
                                    <el-table-column
                                        type="index"
                                        label="序号"
                                        width="80"
                                        align="center">
                                    </el-table-column>
                                    <el-table-column
                                        prop="name"
                                        label="小区名称"
                                        min-width="180">
                                    </el-table-column>
                                    <el-table-column
                                        prop="district"
                                        label="所属区县"
                                        width="120">
                                    </el-table-column>
                                    <el-table-column
                                        prop="address"
                                        label="详细地址"
                                        min-width="280">
                                    </el-table-column>
                                    <el-table-column
                                        prop="createTime"
                                        label="创建时间"
                                        width="180">
                                    </el-table-column>
                                    <el-table-column
                                        label="操作"
                                        width="320"
                                        align="center">
                                        <template slot-scope="scope">
                                            <div class="operation-btns">
                                                <el-button type="text" size="small" @click="handleEdit(scope.row)">
                                                    <i class="el-icon-edit"></i> 编辑
                                                </el-button>
                                                <el-button type="text" size="small" @click="handleView(scope.row)">
                                                    <i class="el-icon-view"></i> 查看
                                                </el-button>
                                                <el-button type="text" size="small" class="delete-btn" @click="handleDelete(scope.row)">
                                                    <i class="el-icon-delete"></i> 删除
                                                </el-button>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                
                                <!-- 分页器 -->
                                <div class="pagination-container">
                                    <el-pagination
                                        @size-change="handleSizeChange"
                                        @current-change="handleCurrentChange"
                                        :current-page="pagination.currentPage"
                                        :page-sizes="[10, 20, 30, 50]"
                                        :page-size="pagination.pageSize"
                                        layout="total, sizes, prev, pager, next, jumper"
                                        :total="pagination.total">
                                    </el-pagination>
                                </div>
                            </div>
                        </div>

                        <!-- 新建对话框 -->
                        <el-dialog
                            title="新建小区"
                            :visible.sync="dialogVisible"
                            width="50%"
                            :close-on-click-modal="false"
                            :before-close="handleClose">
                            <el-form :model="formData" :rules="rules" ref="formRef" label-width="100px">
                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <el-form-item label="区/县" prop="district">
                                            <el-select v-model="formData.district" placeholder="请选择区县" style="width: 100%">
                                                <el-option label="环翠" value="环翠"></el-option>
                                                <el-option label="文登" value="文登"></el-option>
                                                <el-option label="荣成" value="荣成"></el-option>
                                                <el-option label="乳山" value="乳山"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="小区名称" prop="name">
                                            <el-input v-model="formData.name" placeholder="请输入小区名称"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <el-form-item label="经度" prop="longitude">
                                            <el-input v-model="formData.longitude" placeholder="请输入经度"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="纬度" prop="latitude">
                                            <el-input v-model="formData.latitude" placeholder="请输入纬度"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <el-form-item label="房屋类型" prop="houseType">
                                            <el-radio-group v-model="formData.houseType">
                                                <el-radio label="住宅">住宅</el-radio>
                                                <el-radio label="商铺">商铺</el-radio>
                                                <el-radio label="办公">办公</el-radio>
                                                <el-radio label="车位">车位</el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-form-item label="详细地址" prop="address">
                                    <el-input v-model="formData.address" placeholder="请输入详细地址"></el-input>
                                </el-form-item>
                            </el-form>
                            <span slot="footer" class="dialog-footer">
                                <el-button @click="handleClose">取 消</el-button>
                                <el-button type="primary" @click="submitForm">确 定</el-button>
                            </span>
                        </el-dialog>

                        <!-- 在container div内的最底部添加 -->
                        <div class="footer">
                            <div class="footer-content">
                                <div class="footer-section">
                                    <h3>关于我们</h3>
                                    <p>威海市智慧社区管理平台</p>
                                    <p>专注于提供智能化社区解决方案</p>
                                </div>
                                <div class="footer-section">
                                    <h3>联系方式</h3>
                                    <p>电话：400-888-9999</p>
                                    <p>邮箱：support@weihai.gov.cn</p>
                                </div>
                                <div class="footer-section">
                                    <h3>备案信息</h3>
                                    <p>Copyright © 2024 威海市智慧社区</p>
                                    <p>鲁ICP备12345678号-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    systemTitle: '智能办公系统',
                    dialogVisible: false,
                    formData: {
                        district: '',
                        name: '',
                        longitude: '',
                        latitude: '',
                        address: '',
                        houseType: '住宅'
                    },
                    rules: {
                        district: [
                            { required: true, message: '请选择区县', trigger: 'change' }
                        ],
                        name: [
                            { required: true, message: '请输入小区名称', trigger: 'blur' },
                            { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
                        ],
                        longitude: [
                            { required: true, message: '请输入经度', trigger: 'blur' },
                            { pattern: /^[\d.]+$/, message: '请输入正确的经度格式', trigger: 'blur' }
                        ],
                        latitude: [
                            { required: true, message: '请输入纬度', trigger: 'blur' },
                            { pattern: /^[\d.]+$/, message: '请输入正确的纬度格式', trigger: 'blur' }
                        ],
                        address: [
                            { required: true, message: '请输入详细地址', trigger: 'blur' }
                        ],
                        houseType: [
                            { required: true, message: '请选择房屋类型', trigger: 'change' }
                        ]
                    },
                    activeMenu: '1',  // 修改为默认选中首页
                    isCollapse: false,  // 控制菜单折叠状态
                    chartTimeRange: '7',
                    notices: [
                        {
                            title: '关于小区电梯维修的通知',
                            time: '2024-01-15',
                            type: 'warning',
                            tag: '维修'
                        },
                        {
                            title: '物业费用缴纳提醒',
                            time: '2024-01-14',
                            type: 'info',
                            tag: '缴费'
                        },
                        {
                            title: '小区环境整治公告',
                            time: '2024-01-13',
                            type: 'success',
                            tag: '环境'
                        },
                        {
                            title: '业主委员会选举通知',
                            time: '2024-01-12',
                            type: 'primary',
                            tag: '选举'
                        }
                    ],
                    todoFilter: 'all',
                    todos: [
                        {
                            title: '审核业主申请',
                            time: '09:30',
                            type: 'danger',
                            tag: '紧急',
                            done: false
                        },
                        {
                            title: '处理投诉反馈',
                            time: '10:00',
                            type: 'warning',
                            tag: '待办',
                            done: false
                        },
                        {
                            title: '巡检电梯设备',
                            time: '14:00',
                            type: 'info',
                            tag: '日常',
                            done: false
                        },
                        {
                            title: '更新公告信息',
                            time: '16:00',
                            type: 'success',
                            tag: '普通',
                            done: false
                        }
                    ],
                    tableData: [],
                    pagination: {
                        currentPage: 1,
                        pageSize: 10,
                        total: 100
                    }
                }
            },
            computed: {
                completedTodos() {
                    return this.todos.filter(todo => todo.done).length;
                }
            },
            methods: {
                handleClose() {
                    this.$refs.formRef.resetFields();
                    this.dialogVisible = false;
                },
                submitForm() {
                    this.$refs.formRef.validate((valid) => {
                        if (valid) {
                            // TODO: 处理表单提交
                            console.log('表单数据:', this.formData);
                            this.$message.success('提交成功');
                            this.handleClose();
                        } else {
                            return false;
                        }
                    });
                },
                // 切换菜单折叠状态
                toggleCollapse() {
                    this.isCollapse = !this.isCollapse;
                },
                // 添加菜单点击处理方法
                handleSelect(index, indexPath) {
                    this.activeMenu = index;
                    // 根据需要处理路由跳转或其他逻辑
                },
                initVisitChart() {
                    const chart = echarts.init(this.$refs.visitChart);
                    const option = {
                        backgroundColor: 'transparent',
                        tooltip: {
                            trigger: 'axis',
                            backgroundColor: 'rgba(0,0,0,0.7)',
                            borderColor: 'rgba(0,255,255,0.2)',
                            textStyle: { color: '#fff' }
                        },
                        grid: {
                            top: '40',
                            left: '30',
                            right: '30',
                            bottom: '40',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                            axisLine: {
                                lineStyle: { color: 'rgba(255,255,255,0.2)' }
                            },
                            axisLabel: { color: 'rgba(255,255,255,0.7)' }
                        },
                        yAxis: {
                            type: 'value',
                            splitLine: {
                                lineStyle: { color: 'rgba(255,255,255,0.1)' }
                            },
                            axisLabel: { color: 'rgba(255,255,255,0.7)' }
                        },
                        series: [{
                            data: [820, 932, 901, 934, 1290, 1330, 1320],
                            type: 'line',
                            smooth: true,
                            lineStyle: {
                                width: 3,
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#00ffff'
                                }, {
                                    offset: 1,
                                    color: '#0066ff'
                                }])
                            },
                            areaStyle: {
                                opacity: 0.2,
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(0,255,255,0.3)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0,102,255,0.1)'
                                }])
                            },
                            itemStyle: {
                                color: '#00ffff',
                                borderWidth: 2,
                                borderColor: '#fff'
                            }
                        }]
                    };
                    chart.setOption(option);
                    window.addEventListener('resize', () => chart.resize());
                },
                initPieChart() {
                    const chart = echarts.init(this.$refs.pieChart);
                    const option = {
                        backgroundColor: 'transparent',
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b}: {c} ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            right: 10,
                            top: 'center',
                            textStyle: { color: 'rgba(255,255,255,0.7)' }
                        },
                        series: [{
                            name: '房屋类型',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: { show: false },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '14',
                                    fontWeight: 'bold'
                                }
                            },
                            data: [
                                { value: 1048, name: '住宅' },
                                { value: 735, name: '商铺' },
                                { value: 580, name: '办公' },
                                { value: 484, name: '车位' }
                            ]
                        }]
                    };
                    chart.setOption(option);
                    window.addEventListener('resize', () => chart.resize());
                },
                initBarChart() {
                    const chart = echarts.init(this.$refs.barChart);
                    const option = {
                        backgroundColor: 'transparent',
                        tooltip: { trigger: 'axis' },
                        grid: {
                            top: '40',
                            left: '30',
                            right: '30',
                            bottom: '40',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                            axisLine: {
                                lineStyle: { color: 'rgba(255,255,255,0.2)' }
                            },
                            axisLabel: { color: 'rgba(255,255,255,0.7)' }
                        },
                        yAxis: {
                            type: 'value',
                            splitLine: {
                                lineStyle: { color: 'rgba(255,255,255,0.1)' }
                            },
                            axisLabel: { color: 'rgba(255,255,255,0.7)' }
                        },
                        series: [{
                            data: [120, 200, 150, 80, 70, 110],
                            type: 'bar',
                            barWidth: '60%',
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#00ffff'
                                }, {
                                    offset: 1,
                                    color: '#0066ff'
                                }]),
                                borderRadius: [4, 4, 0, 0]
                            }
                        }]
                    };
                    chart.setOption(option);
                    window.addEventListener('resize', () => chart.resize());
                },
                handleSizeChange(val) {
                    this.pagination.pageSize = val;
                    this.loadTableData();
                },
                handleCurrentChange(val) {
                    this.pagination.currentPage = val;
                    this.loadTableData();
                },
                handleEdit(row) {
                    console.log('编辑', row);
                    // TODO: 实现编辑功能
                },
                handleView(row) {
                    console.log('查看', row);
                    // TODO: 实现查看功能
                },
                handleDelete(row) {
                    this.$confirm('确认删除该小区信息吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        // TODO: 实现删除功能
                        this.$message.success('删除成功');
                    }).catch(() => {});
                },
                loadTableData() {
                    // 模拟数据
                    this.tableData = [
                        {
                            name: '东龙-滨海明珠',
                            district: '环翠',
                            address: '威海市环翠区海滨路128号滨海明珠小区',
                            createTime: '2024-01-15 16:25:46'
                        },
                        {
                            name: '文登星城',
                            district: '文登',
                            address: '威海市文登区文山路88号文登星城',
                            createTime: '2024-01-14 14:30:22'
                        },
                        {
                            name: '荣成海景',
                            district: '荣成',
                            address: '威海市荣成市海湾路238号荣成海景小区',
                            createTime: '2024-01-13 09:15:33'
                        }
                    ];
                },
                showMessages() {
                    // TODO: 显示消息列表
                    this.$message({
                        message: '您有3条未读消息',
                        type: 'info'
                    });
                },
                clearCompletedTodos() {
                    this.todos = this.todos.filter(todo => !todo.done);
                }
            },
            mounted() {
                this.initVisitChart();
                this.initPieChart();
                this.initBarChart();
                this.loadTableData();
            }
        })
    </script>
</body>
</html>

